<template>
  <div class="container">
    <div class="input-group mb-3">
      <input
        type="text"
        class="form-control"
        placeholder="请输入想要添加的任务"
        aria-label="Recipient's username"
        aria-describedby="button-addon2"
        v-model="ipt"
        @keyup.enter="handle()"
      />
      <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="button" @click="handle($event)">
          新增任务
        </button>
      </div>
    </div>
    <div>任务总数：{{ list.length }}</div>
    <div>完成数量：{{ num }}</div>
    <button type="button" class="btn w-100 btn-outline-danger" @click="delAll()">
      清空所有任务
    </button>
  </div>
  <!-- 下面列表 -->
  <div class="container">
    <ul class="list-group">
      <li class="one list-group-item" v-for="(item, index) in list" :key="index">
        <div>
          任务：{{ item.pvalue }}
          <div v-show="item.state">(已完成)</div>
          <div v-show="!item.state">(未完成)</div>
        </div>
        <div>
          <button
            type="button"
            class="btn btn-outline-success"
            @click.once="complete($event, index)"
            :disabled="item.state"
          >
            完成
          </button>
          <button
            type="button"
            class="btn btn-outline-danger"
            @click="del($event, index)"
          >
            删除
          </button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
/*
要求:
1、请使用Vue3 组合API完成业务功能。
2、在文本框输入任务，点击 新增任务 按钮 实现任务新增
3、新增任务 在列表中展示， 默认状态为 未完成
4、点击列表中 完成 按钮 ，对应任务 变成 已完成状态
5、实现 任务总数 与 完成数量  实时记录
6、点击 清空所有任务 按钮 删除任务列表中的所有任务
*/
import { ref } from "vue";
export default {
  setup() {
    const list = ref([
      {
        id: 1,
        pvalue: "周一 健身",
        state: false,
      },
      {
        id: 2,
        pvalue: "周二 游泳",
        state: false,
      },
    ]);
    // 完成任务数
    let num = ref(0);

    // 文本框的值
    let ipt = ref("");

    // 头部新增任务按钮
    const handle = (e) => {
      if (ipt.value != 0) {
        list.value.push({ id: Date.now(), pvalue: ipt.value, state: false });
        ipt.value = "";
      }
      //   console.log(list.value);
    };

    // 清空所有任务
    const delAll = () => {
      list.value = [];
    };

    //ul 完成按钮
    const complete = (e, _index) => {
      list.value[_index].state = true;
      num.value++;
    };

    // ul删除按钮
    const del = (e, _index) => {
      if (list.value[_index].state == true) num.value--;
      list.value.splice(_index, 1);
      //   console.log(_index, list.value);
    };
    return { list, ipt, num, handle, complete, del, delAll };
  },
};
</script>

<style>
.one {
  display: flex;
  justify-content: space-between;
}
li {
  list-style: none;
}
</style>
